<template>
  <div class="order-list-table">
    <div class="tr head">
      <div class="td id">订单号</div>
      <div class="td amount">付费金额</div>
      <div class="td date">日期</div>
    </div>
    <div class="tr" v-for="item in listData" :key="item.id">
      <div class="td id">{{item.id}}</div>
      <div class="td amount"><span>{{item.price/100}}</span></div>
      <div class="td date">{{item.timeStr}}</div>
    </div>
  </div>
  <div class="pagination-box">
    <pagination v-model="condition.pageIndex" :total-items="condition.total" :items-per-page="condition.pageSize" @change="handleTurnChange"/>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import {Pagination} from 'vant'
import api from "../../api/index.js";
import {formatTime} from "../../common/utils.js";
const listData = ref([])
const condition = ref({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
})
const queryLoading = ref(false)
const getOrderList = () => {
  listData.value = []
  queryLoading.value = true
  api.getOrderList(condition.value.pageIndex, condition.value.pageSize).then((res) => {
    if (res.data) {
      condition.value.total = res.data.total
      listData.value = res.data.list || []
      listData.value.forEach((item) => {
        if (item.createTime) {
          item.timeStr = formatTime(item.createTime)
        }
      })
    }
    queryLoading.value = false
  }).catch((e) => {
    queryLoading.value = false
  })
}
getOrderList()
const handleTurnChange = () => {
  getOrderList()
}
</script>
<style scoped lang="less">
.pagination-box{
  position: relative;
  padding-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.order-list-table{
  position: relative;
  margin-top: 20px;
  font-size: 14px;
  .tr{
    display: flex;
    align-items: center;
    height: 40px;
    &.head{
      font-weight: 700;
    }
    .td{
      text-align: center;
    }
    .id{
      width: 40%;
      min-width: 40%;
    }
    .amount{
      width: 30%;
      min-width: 30%;
    }
    .date{
      width: 30%;
      min-width: 30%;
    }
    &:nth-child(odd){
      background: rgba(0,0,0,0.05);
    }
  }
}
</style>
